<template>
  <view class="list-container"><!-- {{location}} -->
     <!-- 列表内容 -->
     <scroll-view 
       scroll-y
       class="scroll-list"
       @scrolltolower="loadMore"
       refresher-enabled
       :refresher-triggered="isRefreshing"
       @refresherrefresh="onRefresh"
     >
       <view class="list-item" v-for="(item, index) in listData" :key="index">
 		<div class="container">
 		    <div class="event-details">
 		      <h1>{{item.act_name}}</h1>
 		        <div class="info-row">
 					<span>活动地址：{{item.act_addr}}</span>
 		        </div>
 				<div class="info-row">
 					<span>开始日期：{{item.start}}</span>
 				</div>
 				<div class="info-row">
 					<span>参与人数：{{item.count}}</span>
 				</div>
 				<div class="info-row">
 					<span>截止签到日期：{{item.deadline}}</span>
 				</div>
 				<div class="info-row">
 					<span>截至领奖日期：{{item.receive}}</span>
 				</div>
 		    </div>
 		    <button class="check-in-button" @click="sign(item)">签到</button>
 		</div>
       </view>
       
       <!-- 加载更多 -->
       <view  class="loading" style="background-color: #fff;" v-if="loading">
         <text>加载中...</text>
       </view>
       <!-- 没有更多数据 -->
       <view class="no-more" style="background-color: #fff;" v-if="noMore">
         <text>没有更多数据了</text>
       </view>
     </scroll-view>
   </view>

</template>

<script>
export default {
  data() {
    return {
		location: {
		  latitude: '',
		  longitude: '',
		  address: ''
		},
	  openid:'',
      page: 1,
      listData: [],
      loading: false,
      noMore: false,
      isRefreshing: false
    }
  },
  
  onLoad(opt) {
	this.openid =opt.id
    this.getListData()
  },
  
  methods: {
    // 获取列表数据
    async getListData() {
      this.loading = true
      try {
        // 这里替换成你的实际接口
        const res = await this.$api.request('v2/guest/activity/list',{id:this.openid,state:2})
        
        if(this.page === 1) {
          this.listData = res.data
        } else {
          this.listData = [...this.listData, ...res.data]
        }
        
        this.noMore = res.data.length < 10 // 假设每页10条数据
        
      } catch(e) {
        console.error(e)
      }
      this.loading = false
    },
    
    // 加载更多
    loadMore() {
      if(this.loading || this.noMore) return
      this.page++
      this.getListData()
    },
    
    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true
      this.page = 1
      await this.getListData()
      this.isRefreshing = false
    },
	rad(d) {
	    return d * Math.PI / 180.0;
	},
	async sign(v){
		
		let now = new Date()
		let now1 = new Date(v.act_qddate[0])
		let now2 = new Date(v.act_qddate[1])
		if (!now.getTime()<now1.getTime()||now.getTime()>now2.getTime()){
			alert('不在签到时间范围内！')
			return
		}
		uni.getLocation({
		  type: 'wgs84',
		  success: res => {
		    let a = this.rad(res.latitude)-this.rad(v.act_jwd[0])
		    let b = this.rad(res.longitude)-this.rad(v.act_jwd[1])
			var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
			        Math.cos(this.rad(res.latitude)) * Math.cos(this.rad(v.act_jwd[0])) * Math.pow(Math.sin(b / 2), 2)));
			if(s*6378137>v.act_limitMi){
				let cg =parseInt(s*6378137-v.act_limitMi)
				alert('超出范围'+cg+'米')
			}else{
				v.state = 3
				this.$api.request('v2/guest/activity/signup',v)
				alert('签到成功！')
			}
			// 弧长乘地球半径, 返回单位: 米
			return s;
		    this.locationStatus = '定位成功'
		  },
		  fail: err => {
		    this.locationStatus = '定位失败，请检查定位权限'
		    console.error('定位错误：', err)
		  }
		})
	}
	
  }
}
</script>
<style lang="scss">
	body {
	  font-family: Arial, sans-serif;
	  background-color: #f5f5f5;
	  margin: 0;
	  padding: 0;
	}
	
	.container {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 20px;
	}
	
	.event-details {
	  width: 100%;
	  max-width: 300px;
	  background-color: white;
	  border: 2px solid #9966cc;
	  border-radius: 8px;
	  padding: 20px;
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	
	h1 {
	  text-align: center;
	  color: #333;
	  margin-bottom: 20px;
	}
	
	.info-row {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 10px;
	}
	
	.info-row span {
	  font-size: 1em;
	  color: #666;
	}
	.check-in-button {
	  margin-top: 40px;
	  padding: 0 30px 0 30px;
	  background-color: #9966cc;
	  color: white;
	  border: none;
	  border-radius: 8px;
	  font-size: 1.2em;
	  cursor: pointer;
	  transition: background-color 0.3s ease;
	}
	
	.check-in-button:hover {
	  background-color: #b399ff;
	}
.list-container {
  height: 100vh;
  background: #f5f5f5;
  
  .scroll-list {
    height: 100%;
  }
  
  .list-item {
    display: flex;
    padding: 20rpx;
    background: #fff;
    margin-bottom: 20rpx;
    
    .item-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
    }
    
    .item-content {
      flex: 1;
      padding-left: 20rpx;
      .item-title {
        font-size: 32rpx;
        font-weight: bold;
      }
      
      .item-desc {
        font-size: 28rpx;
        color: #666;
        margin-top: 10rpx;
      }
    }
  }
  
  .loading, .no-more {
    text-align: center;
    padding: 30rpx;
    color: #999;
  }
}
</style>